<template>
    <div class="discoverPage">
        <!--搜索框-->
        <div class="discoverSearch">
            <div class="searchBox">
                <i class="iconfont icon-fangdajing"></i>
                <span> 歌曲,歌手,歌词,朋友,话题</span>
            </div>
        </div>
        <!--轮播图-->
        <Swiper>
            <Slide>
                <img class="dog_1"
                     src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1528625559859&di=7b4c354c8507ede9f4dd4d8c9d3e634b&imgtype=0&src=http%3A%2F%2Fdown.laifudao.com%2Ftupian%2F2016117134645.jpg"
                     alt="">
            </Slide>
            <Slide>
                <img class="dog_2"
                     src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1528626026031&di=ec2633d1db63947da2eea29ea18f1ac8&imgtype=0&src=http%3A%2F%2Fscimg.jb51.net%2Fallimg%2F140426%2F10-140426205Q04A.jpg"
                     alt="">
            </Slide>
        </Swiper>

        <!--中部菜单-->
        <div class="discoverMenu">
            <div class="recommendation">
                <i class="iconfont icon-jinri"></i>
                <span>今日推荐</span>
            </div>
            <div class="singers">
                <i class="iconfont icon-microphone"></i>
                <span>歌手</span>
            </div>
            <div class="songList">
                <i class="iconfont icon-gedan"></i>
                <span>最热歌单</span>
            </div>
            <div class="rankingList">
                <i class="iconfont icon-zhuzhuangtu"></i>
                <span>榜单</span>
            </div>
            <div class="VIPbenefits">
                <i class="iconfont icon-xingzhuang9"></i>
                <span>会员福利</span>
            </div>
        </div>
        <!--精选歌单-->
        <div class="recommendation_1">
            <div class="title">
                <span>精选歌单</span>
                <i class="iconfont icon-gengduo"></i>
            </div>
            <div class="items">
                <div v-for="(item,index) in fewRecommended" :key="index" class="item">
                    <img :src="item.pic_small" alt="">
                    <span v-html="item.title"></span>
                    <span v-html="item.artist_name"></span>
                </div>
            </div>
        </div>
        <!--黑条-->
        <div class="rubbish">
            <img src="../assets/img/rubbish.jpg" alt="" style="height: 1.6rem;margin-bottom: 0.5rem">
        </div>

        <!--新歌首发-->
        <div class="recommendation_1">
            <div class="title">
                <span>新歌首发</span>
                <i class="iconfont icon-gengduo"></i>
            </div>
            <div class="items">
                <div v-for="(item,index) in recommendedMusic_1" :key="index" class="item">
                    <img :src="item.pic_small" alt="">
                    <span v-html="item.title"></span>
                    <span v-html="item.artist_name"></span>
                </div>
            </div>
        </div>
        <div class="recommendation_1">
            <div class="title">
                <span>唱片墙</span>
                <i class="iconfont icon-gengduo"></i>
            </div>
            <div class="items">
                <div v-for="(item,index) in recommendedMusic_2" :key="index" class="item">
                    <img :src="item.pic_small" alt="">
                    <span v-html="item.title"></span>
                    <span v-html="item.artist_name"></span>
                </div>
            </div>
        </div>
        <div class="recommendation_1">
            <div class="title">
                <span>付费专辑</span>
                <i class="iconfont icon-gengduo"></i>
            </div>
            <div class="items">
                <div v-for="(item,index) in recommendedMusic_3" :key="index" class="item">
                    <img :src="item.pic_small" alt="">
                    <span v-html="item.title"></span>
                    <span v-html="item.artist_name"></span>
                </div>
            </div>
            
        </div>

    </div>
</template>

<script>
    import jsonp from 'jsonp';
    import {Swiper, Slide} from 'vue-swiper-component';

    export default {
        name: "discover",
        components: {Swiper, Slide},
        data() {
            return {
                recommendedMusic: JSON.parse(sessionStorage.getItem("recommendedMusic")),
                recommendedMusic_1: JSON.parse(sessionStorage.getItem("recommendedMusic_1")),
                recommendedMusic_2: JSON.parse(sessionStorage.getItem("recommendedMusic_2")),
                recommendedMusic_3: JSON.parse(sessionStorage.getItem("recommendedMusic_3")),
            }
        },
        computed: {
            fewRecommended() {
                if(this.recommendedMusic){
                    return this.recommendedMusic.slice(0, 6);
                }
            }
        },
        created() {
            jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting?format=json&calback=&from=webapp_music&method=baidu.ting.billboard.billList&type=2&size=10&offset=0", null, (err, res) => {
                if (!err) {
                    let recomData = res.song_list;
                    this.recommendedMusic = recomData;
                    sessionStorage.setItem("recommendedMusic", JSON.stringify(recomData));
                    // console.log(res, this.recommendedMusic);
                } else {
                    console.log(err)
                }
            });
            jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting?format=json&calback=&from=webapp_music&method=baidu.ting.billboard.billList&type=1&size=6&offset=0", null, (err, res) => {
                if (!err) {
                    let recomData = res.song_list;
                    this.recommendedMusic_1 = recomData;
                    sessionStorage.setItem("recommendedMusic_1", JSON.stringify(recomData));
                    // console.log(res, this.recommendedMusic);
                } else {
                    console.log(err)
                }
            });
            jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting?format=json&calback=&from=webapp_music&method=baidu.ting.billboard.billList&type=11&size=3&offset=0", null, (err, res) => {
                if (!err) {
                    let recomData = res.song_list;
                    this.recommendedMusic_2 = recomData;
                    sessionStorage.setItem("recommendedMusic_2", JSON.stringify(recomData));
                    // console.log(this.recommendedMusic_2);
                } else {
                    console.log(err)
                }
            });
            jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting?format=json&calback=&from=webapp_music&method=baidu.ting.billboard.billList&type=21&size=5&offset=0", null, (err, res) => {
                if (!err) {
                    let recomData = res.song_list;
                    this.recommendedMusic_3 = recomData.slice(0,3);
                    sessionStorage.setItem("recommendedMusic_3", JSON.stringify(recomData));
                    // console.log(res);
                } else {
                    console.log(err)
                }
            });
        },
    }
</script>

<style scoped lang="scss">
    .discoverPage {
        width: 100%;
        overflow-y: auto;
        .discoverSearch {
            width: 100%;
            background-color: #22c5bd;
            padding: 0.18rem 0;
            .searchBox {
                width: 10.2rem;
                height: 0.96rem;
                background-color: #1fb2aa;
                margin: 0 auto;
                border-radius: 0.2rem;
                i {
                    font-size: 0.4rem;
                    color: #bce8e6;
                    display: inline-block;
                    margin-top: 0.28rem;
                }
                span {
                    font-size: 0.4rem;
                    color: #bce8e6;
                    display: inline-block;
                    margin-top: 0.28rem;
                }
            }
        }
        .wh_slide {
            height: 4.3rem;
            width: 100%;
            position: relative;
            img {
                width: 100%;
                position: absolute;
                left: 50%;
                transform: translate(-50%, -50%);
                display: block;
            }
            .dog_1 {
                top: 80%;
            }
            .dog_2 {
                top: 40%;
            }
        }
        .discoverMenu {
            width: 100%;
            height: 3.2rem;
            display: flex;
            border-bottom: 0.18rem solid #f6f6f6;
            justify-content: space-around;
            div {
                margin-top: 0.8rem;
                i {
                    font-size: 1rem;
                    color: #35c6c3;
                    display: block;
                    margin-bottom: 0.4rem;
                }
                span {
                    font-size: 0.32rem;
                    display: block;
                }
            }
        }
        .recommendation_1 {
            width: 100%;
            margin-bottom: 0.8rem;
            .title {
                width: 100%;
                height: 1.6rem;
                padding: 0.6rem 0.3rem;
                box-sizing: border-box;
                span {
                    font-size: 0.4rem;
                    display: inline-block;
                    margin: 0 auto;
                    letter-spacing: 0.15rem;
                }
                i {
                    font-size: 0.6rem;
                    color: #636363;
                    float: right;
                }
            }
            .items {
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
            }
            .item {
                width: 3.56rem;
                height: 4.7rem;
                text-align: left;
                img {
                    width: 3.56rem;
                    height: 3.56rem;
                }
                span:nth-child(2) {
                    margin-left: 0.1rem;
                    display: block;
                    font-size: 0.32rem;
                    color: #333333;
                    //文字溢出变省略号的方法
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap
                }
                span:nth-child(3) {
                    margin-left: 0.1rem;
                    display: block;
                    font-size: 0.32rem;
                    color: #999999;
                }
            }
        }
    }
</style>